<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <h:body>
        <ui:param name="path" value=".."/>
         <ui:param name="jsRoot" value="#{request.requestURL.substring(0, request.requestURL.length() - request.requestURI.length())}#{request.contextPath}"/>
        <ui:param name="cssRoot" value="#{request.requestURL.substring(0, request.requestURL.length() - request.requestURI.length())}#{request.contextPath}"/>
        <ui:param name="urlRoot" value="#{request.requestURL.substring(0, request.requestURL.length() - request.requestURI.length())}#{request.contextPath}"/>
        <ui:composition template="#{path}/templates/template_gallery.xhtml">            
            <ui:define name="resources">
                <!--    fancybox{-->
                <script type="text/javascript" src="#{jsRoot}/_js/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
                <script type="text/javascript" src="#{jsRoot}/_js/fancybox/jquery.fancybox-1.3.4.js"></script>
                <link rel="stylesheet" type="text/css" href="#{jsRoot}/_js/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
                <script type="text/javascript">
                    function fa(){
                        $(".various").fancybox({
                            /*'width': '75%',
                            'height': '75%',*/
                            'autoScale': false,
                            'transitionIn': 'elastic',
                            'transitionOut': 'elastic',
                            'type': 'iframe',
                            'titlePosition': 'inside',
//                            'easingIn' : 'easeOutBack',
//                            'easingOut' : 'easeInBack',                            
                            'onClosed': function() {
                                fa();
                            } 
                        });
                    }
                    $(document).ready(function() {
			
                        fa();

		
                    });
                </script>
                <!--    fancybox{-->
                <style>
                    .image_item{
                        margin: 0 0px 0px 0px;
                        width: 300px;
                        height: 200px;
                        float: left;
                        padding: 30px 50px;
                    }
                    .image_item img{
                        width: 300px;
                        height: 200px;
                    }
                </style>
            </ui:define>

            <ui:define name="content">    


                <div id="_title">
                    VIDEO
                </div>

                <div class="image_item">
                    <div style="position: relative;">
                        <a class="various" title="Lorem ipsum dolor sit amet" 
                           href="http://www.youtube.com/embed/L9szn1QQfas?autoplay=1">
                            <img alt="" src="#{jsRoot}/_js/nivo-slider/demo/images/up.jpg" />
                            <div class="_play_icon">&nbsp;</div>
                        </a>

                    </div>
                </div>


                <div class="image_item">
                    <div style="position: relative;">
                        <a class="various" title="Lorem ipsum dolor sit amet" 
                           href="http://www.youtube.com/embed/56hBnj5WA6I?autoplay=1">
                            <img  src="http://i2.ytimg.com/vi/56hBnj5WA6I/default.jpg"/>
                        </a>

                    </div>
                </div>

                <div class="image_item">
                    <div style="position: relative;">
                        <a class="various" title="Lorem ipsum dolor sit amet" 
                           href="http://www.youtube.com/embed/5cE2RNuZVTc?autoplay=1">
                            <img  src="http://i2.ytimg.com/vi/5cE2RNuZVTc/default.jpg"/>

                            <div class="_play_icon">&nbsp;</div>
                        </a>
                    </div>
                </div>

                <div class="image_item">
                    <div style="position: relative;">
                        <a class="various" title="Lorem ipsum dolor sit amet" 
                           href="http://www.youtube.com/embed/56hBnj5WA6I?autoplay=1">
                            <img  src="http://i2.ytimg.com/vi/56hBnj5WA6I/default.jpg"/>

                            <div class="_play_icon">&nbsp;</div>
                        </a>
                    </div>
                </div>

                <div class="image_item">
                    <div style="position: relative;">
                        <a class="various" title="Lorem ipsum dolor sit amet" 
                           href="http://www.youtube.com/embed/L9szn1QQfas?autoplay=1">
                            <img alt="" src="./js/nivo-slider/demo/images/up.jpg" />

                            <div class="_play_icon">&nbsp;</div></a>
                    </div>
                </div>
                <div class="image_item">
                    <div style="position: relative;">
                        <a class="various" title="Lorem ipsum dolor sit amet" 
                           href="http://www.youtube.com/embed/56hBnj5WA6I?autoplay=1">
                            <img  src="http://i2.ytimg.com/vi/56hBnj5WA6I/default.jpg"/>

                            <div class="_play_icon">&nbsp;</div>
                        </a>
                    </div>
                </div>

                <div class="image_item">
                    <div style="position: relative;">
                        <a class="various" title="Lorem ipsum dolor sit amet" 
                           href="http://www.youtube.com/embed/5cE2RNuZVTc?autoplay=1">
                            <img  src="http://i2.ytimg.com/vi/5cE2RNuZVTc/default.jpg"/>

                            <div class="_play_icon">&nbsp;</div>
                        </a>
                    </div>
                </div>

                <div class="image_item">
                    <div style="position: relative;">
                        <a class="various" title="Lorem ipsum dolor sit amet" 
                           href="http://www.youtube.com/embed/56hBnj5WA6I?autoplay=1">
                            <img  src="http://i2.ytimg.com/vi/56hBnj5WA6I/default.jpg"/>

                            <div class="_play_icon">&nbsp;</div>
                        </a>
                    </div>
                </div>
                <div class="image_item">
                    <div style="position: relative;">
                        <a class="various" title="Lorem ipsum dolor sit amet" 
                           href="http://www.youtube.com/embed/5cE2RNuZVTc?autoplay=1">
                            <img  src="http://i2.ytimg.com/vi/5cE2RNuZVTc/default.jpg"/>

                            <div class="_play_icon">&nbsp;</div>
                        </a>
                    </div>
                </div>
                <div style="display: none">
                    <p:lightBox styleClass="image_item" iframe="true">  
                        <h:outputLink value="http://www.youtube.com/embed/5cE2RNuZVTc?autoplay=1"> 
                            <div style="position: relative;">
                                <img  src="http://i2.ytimg.com/vi/5cE2RNuZVTc/default.jpg"/>
                                <div class="_play_icon">&nbsp;</div>
                            </div>
                        </h:outputLink>  
                    </p:lightBox>
                </div>

            </ui:define>
        </ui:composition>
    </h:body>
</html>

